<template>
	<div>
		<!-- pdf的  dom id -->
		<div id="pdfDom">
			1231231231231231231
			<div style="background-color: red;width: 100px;height: 100px;"></div>
		</div>
		<!-- 导出调用方法的话   第一个为form表单的id  记得要加井号# !!!! 传入第二个是名称 -->
		<el-button type="primary" @click="pdfExport('#pdfDom', 'export-pdf-demo')">导出pdf</el-button>
	</div>
</template>

<script>
	import JsPDF from 'jspdf';
	import html2Canvas from 'html2canvas';
	export default {
		methods: {
			pdfExport(el, name) {
				let title = name + this.$formatDate();
				html2Canvas(document.querySelector(el), {
					allowTaint: true
				}).then(function(canvas) {
					let contentWidth = canvas.width;
					let contentHeight = canvas.height;
					let pageHeight = (contentWidth / 592.28) * 841.89;
					let leftHeight = contentHeight;
					let position = 0;
					let imgWidth = 595.28;
					let imgHeight = (592.28 / contentWidth) * contentHeight;
					let pageData = canvas.toDataURL('image/jpeg', 1.0);
					let PDF = new JsPDF('', 'pt', 'a4');
					if (leftHeight < pageHeight) {
						PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
					} else {
						while (leftHeight > 0) {
							PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
							leftHeight -= pageHeight;
							position -= 841.89;
							if (leftHeight > 0) {
								PDF.addPage();
							}
						}
					}
					PDF.save(title + '.pdf');
				});
			}
		}
	};
</script>

<style scoped>
	#pdfDom {
		width: 800px;
		text-align: center;
		align-items: center;
		background-color: beige;
	}
</style>